<template>
  <a-card>
    <div id="main2" style="height: 400px;"></div>
  </a-card>
</template>
<script setup>
const dashboardState = useStore.dashboardState()
import * as echarts from 'echarts';
let myChart = null
const handleLoadChart = ()=>{
  nextTick(()=> {
    // 基于准备好的dom，初始化echarts实例
    myChart = echarts.init(document.getElementById('main2'));
    myChart.setOption({
      tooltip: {
        trigger: 'item'
      },
      type: 'pie',
      legend: {
        top: '1%',
        left: 'center'
      },
      avoidLabelOverlap: false,
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['50%', '60%'],
          // adjust the start and end angle
          startAngle: 0,
          endAngle: 360,
          data: [
            { value: 1048, name: 'Search Engine' },
            { value: 735, name: 'Direct' },
            { value: 580, name: 'Email' },
            { value: 484, name: 'Union Ads' },
            { value: 300, name: 'Video Ads' }
          ]
        }
      ]
    })

    window.addEventListener('resize', function() {
      myChart.resize();
    });
  })
}

watch(()=>dashboardState.expand,(nval)=>{
  myChart.resize();
})

onMounted(()=>{
  handleLoadChart()
})
</script>
<style scoped lang="scss"></style>